<!-- 
	有前后间距的轮播图
	不支持nvue，
	实现方式：uni-app previous-margin，next-margin属性控制
		默认外层宽度750rpx 需要显示的图片尺寸为630rpx,需要显示两边轮播图漏出的间距为30rpx
		计算方式:1.计算两边间距和750-630=120
				2.计算两个图片之间的间距，两边间距一半减去漏出尺寸120/2-30=30
				3.图片间距两部分，拆成两部分，为图片外边距：30/2=15
				4.最后的previous-margin和next-margin为30+15=45
 -->
<template>
  <swiper
    class="imageContainer"
    circular
    previous-margin="30upx"
    next-margin="30upx"
    autoplay
  >
    <swiper-item
      class="swiperitem"
      v-for="(item, index) in bannerlist"
      :key="index"
    >
      <image class="itemImg" :src="item.photoUrl" mode="widthFix"></image>
    </swiper-item>
  </swiper>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {},
  props: ["bannerlist"],
};
</script>
<style scoped>
.imageContainer {
  width: 100%;
  height: 100%;
}
.itemImg {
  width: 100% !important;
  display: block;
}
.swiperitem {
  width: 100% !important;
  /* height: 147upx !important;	 */
  /* display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden; */
}
</style>
